<template>
    <div class="search-form-box">
        <el-form 
            :inline="true"
            @submit.prevent="submitFn"
        >
            <el-form-item label="物料编号">
                <el-input size="small" v-model="searchKey" placeholder="请输入关键字" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" :icon="Search" @click="submitFn">查询</el-button>
                <el-button size="small" :icon="Refresh" @click="resetFormFn">重置</el-button>                
            </el-form-item>
        </el-form>
    </div>
    <div class="table-box">        
        <div class="table-content-box">
            <el-table 
                :data="filterTableList" 
                size="small"
                v-loading="loading"
                border>
                <el-table-column type="index" label="#" align="center" />
                <el-table-column prop="materialCode" align="center" label="物料编号"></el-table-column>
                <el-table-column prop="materialName" align="center" label="物料名称"></el-table-column>
                <el-table-column prop="materialUnit" align="center" label="物料单位"></el-table-column>
                <el-table-column prop="materialType" align="center" label="物料类型"></el-table-column>
                <el-table-column prop="materialCount" align="center" label="库数量"></el-table-column>            
                <el-table-column prop="updateTime" align="center" label="维护时间"></el-table-column>               
                <el-table-column  label="操作" align="center">
                    <template #default="scope">
                        <el-button size="mini" @click="editFn(scope.$index, scope.row)">查看出入库记录</el-button>                                     
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>    
    <store-manage-drawer :showDrawer="showDrawer" @closeDrawerFn="closeDrawerFn" :drawerTitle="title" ref="draweRef" />
</template>
<script>
    import {Edit, Delete, Search,Refresh,Plus } from '@element-plus/icons-vue'
    import { onMounted, reactive, ref,toRefs } from 'vue'
    import storeManageDrawer from './modules/storeManageDrawer'
    import { ElMessage } from 'element-plus'
    import axios from 'axios'
    export default{
        components:{
          storeManageDrawer  
        },
        setup(){
            let data = reactive({
                tableData: [
                    {                        
                        materialCode: 'WL20211214001',
                        materialName: '电冰箱外壳',                        
                        materialUnit: '个',
                        storeNum: 20,
                        materialType: '外壳',
                        updateStoreTime: '2021-12-20'                        
                    },
                    {
                        materialCode: 'WL20211214002',
                        materialName: '空调外壳',                        
                        materialUnit: '个',
                        storeNum: 100,
                        materialType: '外壳',
                        updateStoreTime: '2021-12-20'     
                    }                     
                ],
                filterTableList: [],
                showDrawer: false,
                title: '新增',
                searchKey: '',
                loading: true
            })
            const draweRef = ref(null)
            function submitFn(){
                // console.log('查询：'+data.searchKey)
                let list = []
                if(data.searchKey){
                    list = data.tableData.filter(item=>{
                        return item.materialCode.indexOf(data.searchKey) != -1
                    });
                }
                else{
                    list = data.tableData;
                }
                data.filterTableList = list
            }
            function resetFormFn(){
                data.searchKey = ''
                data.filterTableList = JSON.parse(JSON.stringify(data.tableData))
            }
            function addFn(){
                data.showDrawer = true
                // data.title='来料检测'
                const _draweRef = draweRef.value
                // _draweRef.form = rowData
                _draweRef.afterShowDrawer({})
            }
            function editFn(index, rowData){
                data.showDrawer = true
                data.title='出入库记录'
                const _draweRef = draweRef.value
                 _draweRef.afterShowDrawer(rowData)
                // _draweRef.form = rowData
                // console.log('draweRef', _draweRef.form)
            }
            function deleteFn(index, rowData){

            }
            function closeDrawerFn(){
                data.showDrawer = false
            }
            async function loadData(){
                data.loading = true
                setTimeout(async ()=>{
                    let res = await axios.get('/materialInfoList')
                    // console.log(data)
                    let list = res.data
                    if(list.success){
                        data.tableData = list.result.list
                        data.filterTableList = JSON.parse(JSON.stringify(data.tableData))
                    }
                    data.loading = false
                }, 1000)
            }
            onMounted(()=>{
                loadData()
            })
            return {               
                Edit,
                Delete,
                Refresh,
                Search,
                Plus,
                ...toRefs(data),
                draweRef,
                addFn,
                closeDrawerFn,
                submitFn,
                deleteFn,
                resetFormFn,
                editFn,
                loadData
            }
        }
    }
</script>

<style lang="scss" scoped>
 .search-form-box{
     border-radius: 4px;
     background: #fff;
     padding: 10px;
 }
 .el-form--inline .el-form-item{
   margin-bottom: 0;
 }
 .table-box{
     border-radius: 4px;
     background: #fff;
     padding: 10px;
     margin-top: 10px;
     .table-content-box{
         margin-top: 10px;
     }
 }
</style>